<!doctype html>
<html lang="en-US">
<head>
	<meta charset="UTF-8" />
	<title>Congo Documentation</title>
	<link rel="stylesheet" type="text/css" href="pagestyle.css" />
</head>
<body>
	<div class="sheet container">
		<header class="main">

			<div class="title">
				<a href="Modules_congo.html"><img src="data/congo.png"/></a>Congo Documentation
			</div>

		</header>

		<div class="row content">
			<div class="span12">
			
				
<h1>Class <span class="name">Transition</span></h1>


	<p>Abstract base class for all layer transition effects.
	<a href="#description"> More...</a></p>


<hr>

<table class="table scope-contents">
	
	
	
	
	
		<tr>
			<td class="span1 name">Extended&nbsp;by:</td>
			<td>
				<ul class="unstyled">
					<li><a href="Modules_congo.transition_TransitionBlockOut.html">TransitionBlockOut</a>, <a href="Modules_congo.transition_TransitionCircleGrow.html">TransitionCircleGrow</a>, <a href="Modules_congo.transition_TransitionDoorsOpen.html">TransitionDoorsOpen</a>, <a href="Modules_congo.transition_TransitionDropStrips.html">TransitionDropStrips</a>, <a href="Modules_congo.transition_TransitionFadeOut.html">TransitionFadeOut</a>, <a href="Modules_congo.transition_TransitionGridSquares.html">TransitionGridSquares</a>, <a href="Modules_congo.transition_TransitionSlideDown.html">TransitionSlideDown</a>, <a href="Modules_congo.transition_TransitionSlideLeft.html">TransitionSlideLeft</a>, <a href="Modules_congo.transition_TransitionSpinOut.html">TransitionSpinOut</a>, <a href="Modules_congo.transition_TransitionStrips.html">TransitionStrips</a>, <a href="Modules_congo.transition_TransitionWipeAcross.html">TransitionWipeAcross</a>, <a href="Modules_congo.transition_TransitionWipeDiagonal.html">TransitionWipeDiagonal</a>, <a href="Modules_congo.transition_TransitionZoom.html">TransitionZoom</a></li>
				</ul>
			</td>
		</tr>
	

	

	
	
	
	
	

	

								
		<tr>
			<td class="span1 name">Fields:</td>
			<td>
				<ul class="unstyled">
					
						<li><a href='#bgColor'>bgColor</a> : Float[]</li>
					
						<li><a href='#bgSprite'>bgSprite</a> : Sprite</li>
					
						<li><a href='#dtimer'>dtimer</a> : Timer</li>
					
						<li><a href='#easefn'>easefn</a> : EaseFunction</li>
					
						<li><a href='#id'>id</a> : String</li>
					
						<li><a href='#reverse'>reverse</a> : Bool</li>
					
						<li><a href='#ttimer'>ttimer</a> : Timer</li>
					
				</ul>
			</td>
		</tr>
	
	
								
		<tr>
			<td class="span1 name">Constructors:</td>
			<td>
				<ul class="unstyled">
					
						<li><a href='#New'>New</a> ( duration:Float=2000, reverse:Bool=false, ease:EaseFunction=null, delay:Float=0.0, idstring:String="" )</li>
					
				</ul>
			</td>
		</tr>
	
	
								
		<tr>
			<td class="span1 name">Properties:</td>
			<td>
				<ul class="unstyled">
					
						<li><a href='#Id'>Id</a> : Void ( id:String )</li>
					
						<li><a href='#Id(2)'>Id</a> : String ()</li>
					
				</ul>
			</td>
		</tr>
	
	
								
		<tr>
			<td class="span1 name">Methods:</td>
			<td>
				<ul class="unstyled">
					
						<li><a href='Modules_congo.transition_Transition.html#Completed'>Completed</a> : Bool ()</li>
					
						<li><a href='Modules_congo.transition_Transition.html#Draw'>Draw</a> : Void ( layer:Layer )</li>
					
						<li><a href='Modules_congo.transition_Transition.html#Progress'>Progress</a> : Float ()</li>
					
				</ul>
			</td>
		</tr>
	

	
	
	
	
	
	
	
	
</table>


	<a name="description"></a>
	<h2>Detailed Discussion</h2>
	Abstract base class for all layer transition effects.
<p>
Transitions are designed to be used via CongoApp.RunTransition(), and are run on outgoing and
incoming layers separately. On completion, TransitionCompleted() is called on the current layer. 
<p>
Dev note - transitions are implemented in a rather basic way, partly to avoid having 
multiple layers loaded at once, or the use of screen grab images. i.e. they are mostly suited to
simple fades and wipes which remove one layer before revealing the next. This may be improved later.
<p>
	
	
	<hr>



	<h2>Field Documentation</h2>
	<div class="scope-members-list">
		
			<div class="item">
				<a name='bgColor'></a>
				<div class="well well-small name"><b>Field bgColor : Float[]</b></div>
				<div class="description">
					<p>	Background color, defaults to black.</p>
					
					
				</div>
			</div>
		
			<div class="item">
				<a name='bgSprite'></a>
				<div class="well well-small name"><b>Field bgSprite : <a href="Modules_congo.sprite_Sprite.html">Sprite</a></b></div>
				<div class="description">
					<p>	Optional background sprite for transition. Don't set handle on image or sprite.</p>
					
					
				</div>
			</div>
		
			<div class="item">
				<a name='dtimer'></a>
				<div class="well well-small name"><b>Field dtimer : <a href="Modules_congo.timer_Timer.html">Timer</a></b></div>
				<div class="description">
					<p>	Delay before effect starts.</p>
					
					
				</div>
			</div>
		
			<div class="item">
				<a name='easefn'></a>
				<div class="well well-small name"><b>Field easefn : <a href="Modules_congo.easefunction_EaseFunction.html">EaseFunction</a></b></div>
				<div class="description">
					<p>	Ease function. Will be linear if none supplied in constr.</p>
					
					
				</div>
			</div>
		
			<div class="item">
				<a name='id'></a>
				<div class="well well-small name"><b>Field id : String</b></div>
				<div class="description">
					<p>	Used to identify this transition.</p>
					
					
				</div>
			</div>
		
			<div class="item">
				<a name='reverse'></a>
				<div class="well well-small name"><b>Field reverse : Bool</b></div>
				<div class="description">
					<p>	Set to True to run a transition effect in reverse.</p>
					
					
				</div>
			</div>
		
			<div class="item">
				<a name='ttimer'></a>
				<div class="well well-small name"><b>Field ttimer : <a href="Modules_congo.timer_Timer.html">Timer</a></b></div>
				<div class="description">
					<p>	Main timer.</p>
					
					
				</div>
			</div>
		
	</div>
	<hr>




						
	<h2>Constructor Documentation</h2>
	<div class="scope-members-list">
		
			<div class="item">
				<a name='New'></a>
				<div class="well well-small name"><b>Method New ( duration:Float=2000, reverse:Bool=false, ease:<a href="Modules_congo.easefunction_EaseFunction.html">EaseFunction</a>=null, delay:Float=0.0, idstring:String="" )</b></div>
				<div class="description">
					<p>	If no ease if specified, linear is used. Not all transitions support an ease function (e.g. fade is linear).
	Use the 'reverse' option to reverse the timeline of an effect. Similarly, not all effects have a reverse.
<p>
	Dev note - 'bgSprite' is optional. Originally intended to store a screen grab, so more complex transitions can be
	drawn, but this is currently not implemented.
	Dev note - some transitions may not be draw perfectly if using extreme layer scale/rotate.</p>
					
					
				</div>
			</div>
		
	</div>
	<hr>


						
	<h2>Property Documentation</h2>
	<div class="scope-members-list">
		
			<div class="item">
				<a name='Id'></a>
				<div class="well well-small name"><b>Method Id : Void ( id:String ) Property</b></div>
				<div class="description">
					<p>	Sets the Id property.</p>
					
					
				</div>
			</div>
		
			<div class="item">
				<a name='Id(2)'></a>
				<div class="well well-small name"><b>Method Id : String () Property</b></div>
				<div class="description">
					<p>	Returns the Id property.</p>
					
					
				</div>
			</div>
		
	</div>
	<hr>


						
	<h2>Method Documentation</h2>
	<div class="scope-members-list">
		
			<div class="item">
				<a name='Completed'></a>
				<div class="well well-small name"><b>Method Completed : Bool ()</b></div>
				<div class="description">
					<p>	Returns True when the transition is complete (internally, just returns the timer completed status).</p>
					
					
				</div>
			</div>
		
			<div class="item">
				<a name='Draw'></a>
				<div class="well well-small name"><b>Method Draw : Void ( layer:<a href="Modules_congo.layer_Layer.html">Layer</a> )</b></div>
				<div class="description">
					<p>	Abstract draw method -- derived classes must implement this. 
	
	Dev note - since this is called from the end of CongoApp OnRender, the original transform matrix
	will be restored there (i.e. we dont need push/pop matrix here).</p>
					
					
				</div>
			</div>
		
			<div class="item">
				<a name='Progress'></a>
				<div class="well well-small name"><b>Method Progress : Float ()</b></div>
				<div class="description">
					<p>	Transitions use this to get progress amount. It ensures a range of 0.0 to 1.0.</p>
					
					
				</div>
			</div>
		
	</div>
	<hr>




				
			</div>
		</div>
	</div>
</body>
</html>